<template>
  <div class="container">
    <div class="boxWrap">
      <!-- 头部 -->
      <loginHeader></loginHeader>
      <div class="mainBox registerMainBox">
        <el-row class="reminder">
          <i class="el-icon-warning"></i>
          项目用户请先联系所属企业单位开通项目账号后再通过【企业平台】登入系统
        </el-row>
        <el-row class="formTop">
          <div class="loginLink">
            <span>已有企业账号，</span>
            <span @click="skipLogin" class="toLogin">立即登录</span>
          </div>
          <div class="applyTitle">申请企业账号</div>
        </el-row>
        <div class="registerType">
          <ul>
            <li
              @mouseover="mouseOver('company')"
              @mouseleave="mouseleave('company')"
              @click="toRegisterNext('0')"
            >
              <div>
                <div class="title">
                  <img src="/static/img/register/company.png" alt="" />
                  <span class="way">企业</span>
                </div>
                <div class="explainBox">
                  <span
                    >包括国有企业、国有控股企业、外资企业、合资企业、民营企业</span
                  >
                </div>
                <div>
                  <el-button
                    v-show="isApplyButOne"
                    class="commonBut saveBtn"
                    type="primary"
                    >申请账号</el-button
                  >
                </div>
              </div>
            </li>
            <li
              @mouseover="mouseOver('publicInstitution')"
              @mouseleave="mouseleave('publicInstitution')"
              @click="toRegisterNext('5')"
            >
              <div>
                <div class="title">
                  <img
                    src="../../../static/img/register/publicInstitution.png"
                    alt=""
                  />
                  <span class="way">事业单位</span>
                </div>
                <div class="explainBox">
                  <span>包括医院、学校、研究所等国家事业单位</span>
                </div>
                <div>
                  <el-button
                    v-show="isApplyButTwo"
                    class="commonBut saveBtn"
                    type="primary"
                    >申请账号</el-button
                  >
                </div>
              </div>
            </li>
            <li
              @mouseover="mouseOver('individualBusiness')"
              @mouseleave="mouseleave('individualBusiness')"
              @click="toRegisterNext('15')"
            >
              <div>
                <div class="title">
                  <img
                    src="../../../static/img/register/individualBusiness.png"
                    alt=""
                  />
                  <span class="way">个体工商户</span>
                </div>
                <div class="explainBox">
                  <span>是指经工商登记注册、并招用雇工的个体工商户</span>
                </div>
                <div>
                  <el-button
                    v-show="isApplyButThree"
                    class="commonBut saveBtn"
                    type="primary"
                    >申请账号</el-button
                  >
                </div>
              </div>
            </li>
            <li
              @mouseover="mouseOver('other')"
              @mouseleave="mouseleave('other')"
              @click="toRegisterNext('10')"
            >
              <div>
                <div class="title">
                  <img src="../../../static/img/register/other.png" alt="" />
                  <span class="way">其他</span>
                </div>
                <div class="explainBox">
                  <span
                    >税务局、民政局、环保局等国家行政机关；社会团体、民办非企业单位、基金会；居委会、村委会、农名专业合作社、农村集体经济组织、其他组织机构</span
                  >
                </div>
                <div>
                  <el-button
                    v-show="isApplyButFour"
                    class="commonBut saveBtn"
                    type="primary"
                    >申请账号</el-button
                  >
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jqFrom from '../../kits/jquery.form'
import common from '../../kits/common'
import loginHeader from '@/components/publicCom/loginHeader'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'register',
  components: {
    loginHeader,
  },
  data() {
    return {
      isApplyButOne: false, //鼠标移入显示申请账号按钮
      isApplyButTwo: false,
      isApplyButThree: false,
      isApplyButFour: false,
    }
  },
  created() {},
  methods: {
    //跳转登录
    skipLogin() {
      if (this.isCzUser()) {
        this.$router.replace({
          path: '#/login/loginNextCz',
          name: 'loginNextCz',
          query: {
            type: 'QY',
          },
        })
      } else if (this.isEsUser()) {
        this.$router.replace({
          path: '#/login/loginNext',
          name: 'loginNext',
          query: {
            type: 'XM',
          },
        })
      } else {
        this.$router.replace({
          path: '#/login/loginNext',
          name: 'loginNext',
          query: {
            type: 'QY',
          },
        })
      }
    },
    //跳转到注册表单页面
    toRegisterNext(type) {
      this.$router.push({
        path: '#/register/registerNext',
        name: 'registerNext',
        query: {
          companyType: type,
        },
      })
    },
    // 移入
    mouseOver(type) {
      if (type === 'company') {
        this.isApplyButOne = true
      } else if (type === 'publicInstitution') {
        this.isApplyButTwo = true
      } else if (type === 'individualBusiness') {
        this.isApplyButThree = true
      } else {
        this.isApplyButFour = true
      }
    },
    //移出
    mouseleave(type) {
      if (type === 'company') {
        this.isApplyButOne = false
      } else if (type === 'publicInstitution') {
        this.isApplyButTwo = false
      } else if (type === 'individualBusiness') {
        this.isApplyButThree = false
      } else {
        this.isApplyButFour = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  .boxWrap {
    background: #f2f4f6;
    position: fixed;
    top: 0;
    left: 0;
    right: -17px;
    bottom: 0;
    background-size: 100% 100%;
    overflow-y: auto;
    .mainBox {
      width: 980px;
      background-color: #fff;
      margin: 0 auto;
      margin-bottom: 35px;
      padding: 60px;
      text-align: center;
      position: relative;
      // 提示语
      .reminder {
        color: #ff4242;
        font-size: 14px;
        background: #fffbe6;
        padding: 0 30px;
        height: 48px;
        line-height: 48px;
        text-align: left;
        i {
          color: #ffaa00;
          font-size: 20px;
          vertical-align: -2px;
        }
      }
      .formTop {
        color: #666;
        font-size: 14px;
        margin-bottom: 30px;
        .applyTitle {
          margin-top: 35px;
          font-size: 28px;
          color: #333333;
          font-weight: bold;
        }
        .loginLink {
          position: static;
          text-align: right;
          margin: 0 30px;
          padding: 24px 0 16px 0;
          border-bottom: 1px solid #d5dee7;
          .toLogin {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
      .registerType {
        width: 980px;
        height: 460px;
        margin-top: 60px;
        margin-bottom: 0;
        padding: 0 30px;
        ul {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          li {
            width: 210px;
            height: 384px;
            color: #fff;
            cursor: pointer;
            border: 1px solid #fff \0;
            // 动画
            transition: ease-in 0.3s;
            background: linear-gradient(0, #009588 1px, #009588 1px) no-repeat,
              linear-gradient(-90deg, #009588 1px, #009588 1px) no-repeat,
              linear-gradient(-180deg, #009588 1px, #009588 1px) no-repeat,
              linear-gradient(-270deg, #009588 1px, #009588 1px) no-repeat;
            background-size: 0 1px, 1px 0, 0 1px, 1px 0;
            background-position: left top, right top, right bottom, left bottom;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
            img {
              width: 120px;
              height: 120px;
            }
            .way {
              font-size: 18px;
              display: block;
              color: #333;
              margin: 16px 0;
              font-weight: bold;
            }
            .title {
              padding-top: 8px;
            }
            .explainBox {
              height: 140px;
              padding: 0 20px;
              text-align: left;
              span {
                font-size: 14px;
                color: #666;
                line-height: 21px;
              }
            }
            &:hover {
              border: 1px solid #009588 \0;
              background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
              -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
              -o-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
              box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
              .way {
                color: #009588;
              }
            }
          }
        }
      }
    }
    .registerMainBox {
      padding: 0;
    }
    /deep/ .topTitleBox {
      background: url('../../../static/img/loginImg/headerBG.png') no-repeat;
      background-size: 100% 100%;
      margin-bottom: 30px;
    }
  }
}
</style>
